<template>
  <div class="relative w-full aspect-square max-w-xl mx-auto">
    <div
      class="absolute inset-0 rounded-full border-4 border-primary"
      :style="{ transform: `rotate(${rotation}deg)` }"
      :class="{ 'transition-transform duration-1000': isSpinning }"
    >
      <div
        v-for="(realm, index) in realms"
        :key="realm.name"
        class="absolute w-1/2 h-1/2 flex items-center justify-center"
        :style="{
          transform: `rotate(${(index * 60)}deg)`,
          transformOrigin: '100% 100%',
        }"
      >
        <div
          class="w-24 h-24 rounded-full bg-base-100 shadow-lg flex items-center justify-center transform -rotate-45"
          :class="{ 'ring-2 ring-primary': selectedRealm === realm.name }"
          @click="selectRealm(realm.name)"
        >
          <div class="text-center transform rotate-45">
            <i :class="realm.icon" class="text-2xl mb-2"></i>
            <div class="text-sm">{{ realm.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-center">
      <button
        class="btn btn-circle btn-lg btn-primary"
        @click="spin"
        :disabled="isSpinning"
      >
        <span v-if="isSpinning" class="loading loading-spinner"></span>
        <span v-else>转动</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const realms = [
  { name: '人道', icon: 'fas fa-user' },
  { name: '天道', icon: 'fas fa-sun' },
  { name: '阿修罗道', icon: 'fas fa-fire' },
  { name: '畜生道', icon: 'fas fa-paw' },
  { name: '饿鬼道', icon: 'fas fa-ghost' },
  { name: '地狱道', icon: 'fas fa-skull' },
]

const rotation = ref(0)
const isSpinning = ref(false)
const selectedRealm = ref('')

const spin = () => {
  isSpinning.value = true
  selectedRealm.value = ''

  // 随机旋转5-10圈
  const rounds = 5 + Math.floor(Math.random() * 5)
  const targetRotation = rounds * 360 + Math.floor(Math.random() * 360)
  rotation.value = targetRotation

  // 计算最终停止的位置对应的道
  setTimeout(() => {
    isSpinning.value = false
    const finalRotation = targetRotation % 360
    const realmIndex = Math.floor((finalRotation / 60)) % 6
    selectedRealm.value = realms[realmIndex].name
  }, 1000)
}

const selectRealm = (realm: string) => {
  if (!isSpinning.value) {
    selectedRealm.value = realm
  }
}
</script>

<style scoped>
.btn-circle.btn-lg {
  @apply w-16 h-16;
}
</style>
